<template>
	<view class="i-classify-tabs"  :class="viewClass" :style="[viewStyle]">
		<scroll-view class="scroll" :style="[boxStyle]" scroll-x="true">
			<view class="e-flex e-p-l-20" >
				<view
					class="i-classify-tabs__item e-flex-xy-center "
					:class="[index === 0 ? (option.activeIconShow ? 'i-classify-tabs__item--active2 fw-600' : 'i-classify-tabs__item--active1 fw-600') : '']"
					:style="[itemStyle]"
					v-for="(item, index) in pageList"
					:key="index"
					@tap="jumpLink(item)"
				>
					<text>{{ item.pageName }}</text>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script lang="ts" setup>
	
	import { ref,computed } from 'vue'
	import { useLayoutCompoments } from './hooks'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import {px2rpx} from './utils'
	import type {pageLink} from './type'
	import { getGoodsClassify } from '@/common/request/api'
	

	
	const props = withDefaults(defineProps<{
		option : {
			styleType: 0|1|2,
			// 页面类型
			// 1 展示全部分类，点击则跳转分类详情页面显示对应分类
			// 2 展示手动添加的页面
			pageType: 1|2,
			// 手动添加的页面列表
			pageList: pageLink[],
			// 选中的分类是否显示横标
			activeIconShow: boolean,
			// 分类文本字体颜色
			textColor: string,
			// 选中的分类文本字体颜色
			activeTextColor: string,
			// 每个分类的背景颜色
			itemBackgroundColor: string,
			// 整个组件的背景类型
			// 0 背景色
			// 1 背景图
			backgroundType: 0|1,
			// 整个组件的背景颜色
			backgroundColor: string,
			// 整个组件的背景图片地址
			backgroundImage: string,
			// 每个分类之间的间距
			margin: number,
			// 上边距
			paddingTop: number,
			// 下边距
			paddingBottom: number,
			// 左右边距
			paddingX: number,
			// 上圆角
			radiusTop: number,
			// 下圆角
			radiusBottom: number
		}
	}>(), {
		option: () => ({
			styleType: 0,
			pageType: 1,
			pageList: [],
			activeIconShow: false,
			textColor: 'rgba(48, 49, 51, 1)',
			activeTextColor: 'rgba(245, 34, 45, 1)',
			itemBackgroundColor: '',
			backgroundType: 0,
			backgroundColor: '',
			backgroundImage: '',
			margin: 10,
			paddingTop: 0,
			paddingBottom: 0,
			paddingX: 0,
			radiusTop: 0,
			radiusBottom: 0
		})
	})
	
	const ctx = useCurrentInstance()
	const { bodyClass:viewClass,jumpLink } = useLayoutCompoments(ctx, props.option)
	
	const viewStyle = computed(() => {
		return {
						padding: `${px2rpx(props.option.paddingTop)} ${px2rpx(props.option.paddingX)} ${px2rpx(props.option.paddingBottom)} ${px2rpx(props.option.paddingX)}`
		}
	})
	
	const boxStyle = computed(() => {
		return {
			borderRadius: `${px2rpx(props.option.radiusTop)} ${px2rpx(props.option.radiusTop)} ${px2rpx(props.option.radiusBottom)} ${px2rpx(props.option.radiusBottom)}`,
		
			background: props.option.backgroundType == 0 ? props.option.backgroundColor : `url(${ctx.$fullLink(props.option.backgroundImage)})`,
			'--margin': `${props.option.margin}px`,
			'--color': props.option.textColor,
			'--active-color': props.option.activeTextColor
		}
	})
	
	const itemStyle = computed(() => {
		return {
			backgroundColor: props.option.itemBackgroundColor
		}
	})
	type PageItem = {pageName?:string,linkUrl:string,pageUrl:string} & Record<string,any>
	const pageList = ref<PageItem[]>(props.option.pageList)
	
	if(props.option.pageType === 1){
		getGoodsClassify({isPage:false,type: 1}).then(res => {
				pageList.value = res.data.map(item => {
					return {
						pageName: item.name,
						pageUrl:'',
						linkUrl: `/pages/classify/detail?categoryOne=${item.id}`
					}
				})
			
		})
		
	}

</script>
<style lang="scss">
@import '@/components/list/css/layoutCommon.scss';
</style>
<style lang="scss" scoped>
.i-classify-tabs {
	scroll-view{
		white-space: nowrap;
	}
	
	&__item {
		height: 100rpx;
		white-space: nowrap;
		margin-right: var(--margin);
		color: var(--color);
		font-size: 32rpx;
		&:last-child {
			margin-right: 0;
		}
		&--active1 {
			color: var(--active-color);
		}
		&--active2 {
			color: var(--active-color);
			position: relative;
			&::after {
				content: '';
				position: absolute;
				bottom: 8rpx;
				left: calc(50% - 24rpx);
				width: 48rpx;
				height: 8rpx;
				background-color: var(--active-color);
			}
		}
	}
}
</style>
